<template>
	<div class="user-content">
		<el-form :inline="true" :model="searchForm" class="search">
			<el-form-item label="权限名称">
				<el-input v-model="searchForm.permissionName" placeholder="权限名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="queryPermissionListByPage()">查询</el-button>
				<el-button type="primary" @click="addUpdatePermission(null)">新增</el-button>
				<el-button type="primary" @click="deletePermissionList">删除</el-button>
			</el-form-item>
		</el-form>
		<div class="table">
			<el-table :data="tableData" border style="width: 100%" row-key="id" @selection-change="handleSelectionChange" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column fixed prop="permissionName" label="菜单名称">
				</el-table-column>
				<el-table-column prop="permissionCode" label="菜单编码">
				</el-table-column>
				<el-table-column prop="nodeType" label="菜单类型">
				</el-table-column>
				<el-table-column prop="icon" label="图标">
				</el-table-column>
				<el-table-column prop="linkUrl" label="跳转地址">
				</el-table-column>
				<el-table-column prop="sort" label="排序号">
				</el-table-column>
				<el-table-column prop="level" label="层次">
				</el-table-column>
				<el-table-column prop="path" label="路径">
				</el-table-column>
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="addUpdatePermission(scope.row)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[10,50, 100, 200, 500, 1000]" :page-size="pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagina">
		</el-pagination>
		<PermissionSaveUpdateVue ref="child" @refresh="refreshPage"></PermissionSaveUpdateVue>
	</div>
</template>

<script>
	import {
		Message
	} from 'element-ui';
	import {
		queryPermissionsByPage,
		deletePermissions
	} from './api';
	import PermissionSaveUpdateVue from './PermissionSaveUpdate.vue';
	import Qs from 'qs';
	export default {
		components: {
			PermissionSaveUpdateVue,
		},
		data() {
			return {
				tableData: [],
				searchForm: {
					permissionName: '',
				},
				currentPage: 1,
				pageSize: 10,
				total: 0,
				childData: {
					visible: false,
					title: '',
					userForm: {}
				},
				multipleSelection: [],
			}
		},
		mounted() {
			this.queryPermissionListByPage();
		},
		methods: {
			handleClick(row) {
				console.log(row);
			},
			handleSizeChange(val) {
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				console.log(`当前页: ${val}`);
			},
			queryPermissionListByPage() {
				let params = {
					page: this.currentPage,
					pageSize: this.pageSize,
					permissionName: this.searchForm.permissionName,
				}
				queryPermissionsByPage(params).then(res => {
					// console.log(res.data);
					if (res.data.code == 0) {
						this.total = res.data.data.total;
						this.tableData = res.data.data.list;
					} else {
						Message.error(res.data.msg);
					}
				})
			},
			addUpdatePermission(param) {
				if (param != null) {
					this.childData.title = '编辑';
					this.childData.userForm = param;
				} else {
					this.childData.title = '新增';
					this.childData.userForm = null;
				}
				this.childData.visible = true;
				const child = this.$refs.child;
				if (child) {
					child.receiveValues(this.childData);
				}
			},
			refreshPage() {
				this.queryPermissionListByPage();
			},
			deletePermissionList() {
				// console.log(this.multipleSelection);
				if (this.multipleSelection.length == 0) {
					Message({
						showClose: true,
						message: '请选择数据进行删除！',
						duration: 3000,
						type: 'warning'
					})
				}
				const ids = [];
				this.multipleSelection.forEach(item => {
					ids.push(item.id)
				})
				deletePermissions(ids).then(res => {
					if (res.data.code == 0) {
						//刷新页面
						this.queryPermissionListByPage();
						Message({
							showClose: true,
							message: '删除成功',
							type: 'success'
						})
					} else {
						Message.error(res.data.msg);
					}
				})

			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			}
		},
	}
</script>

<style>
	.user-content {
		height: 100vh;
		background-color: white;
	}

	.table {
		margin: 5px;
	}

	.search {
		margin: 5px;
		float: left;
	}

	.pagina {
		float: right;
		margin-right: 10%;
	}
</style>